<template>
  <div class="textInput">
    <el-input
      :maxlength="maxlength"
      show-word-limit
      :rows="rows"
      :placeholder="placeholder"
      v-model="localValue"
      @change="inputChange"
      type="textarea"
      @focus="focusMethod"
      resize="none"
    />

    <el-tooltip class="box-item" effect="dark" content="清除" placement="top">
      <div class="fork-icon" v-show="clearable && localValue" @click.prevent="clearValue">
        <svg-icon icon-class="fork" />
      </div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['input', 'clearValue']);
const props = defineProps({
  values: {
    type: String,
    default: function () {
      return '';
    }
  },

  modelValue: {
    type: String,
    default: ''
  },

  // 最大输入字数
  maxlength: {
    type: Number,
    default: null
  },
  // 提示文字
  placeholder: {
    type: String,
    default: ''
  },
  // 清楚按钮
  clearable: {
    type: Boolean,
    default: false
  },
  // 文本高度行
  rows: {
    type: Number,
    default: 1
  },
  // 输入框值改变
  inputChange: {
    type: Function,
    default: null
  },
  // 聚焦事件
  focusMethod: {
    type: Function,
    default: null
  }
});

const clearValue = () => {
  localValue.value = '';

  emit('clearValue', 1); // 发送事件修改rows为1
};

const localValue = computed({
  get() {
    return props.values;
  },
  set(value) {
    emit('input', value);
  }
});
</script>

<style lang="scss" scoped>
.textInput {
  position: relative;

  .fork-icon {
    position: absolute;
    cursor: pointer;
    font-size: 14px;
    top: 5px;
    right: 6px;
    transform: translateX(2px);
  }

  //   .clearButton {
  //     position: absolute;
  //     border-radius: 5px;
  //     right: 3px;
  //     z-index: 2;
  //     border: none;
  //     top: -3px;
  //     height: 40px;
  //     cursor: pointer;
  //     color: #ccc;
  //     transform: translateX(2px);
  //   }

  //   .clearButton:hover {
  //     color: #878d99;
  //   }
}
</style>
